<!-- 基础审批组件 -->

<!-- 属性 -->
<!-- 配置名称 | 类型 | 用途 | 返回值 | 默认值 | 必填 | 说明 -->
<!-- timeline | Array | 时间轴显示内容 | - | false | - | - -->

<!-- 事件 -->
<!-- 无 -->

<!-- 插槽 -->
<!--
  #ltitle: 左边部分标题
  #rtitle: 右边部分标题
  #info: 需要审批的内容信息
  #form: 审批表单
-->
<script setup lang="ts">
interface Props {
  timeline?: any[] | never[]
  customTimeline?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  timeline: () => {
    return []
  },
  customTimeline: false
})
</script>

<template>
  <div class="base-approve-wrapper">
    <div class="left-wrapper">
      <div class="title">
        <slot name="ltitle">审批信息</slot>
      </div>
      <div class="content">
        <slot name="info"></slot>
      </div>
    </div>
    <div class="right-wrapper">
      <div class="title">
        <slot name="rtitle">审批流程</slot>
      </div>
      <div class="content">
        <template v-if="props.customTimeline">
          <Timeline :timeline="props.timeline"></Timeline>
        </template>
        <template v-else>
          <el-timeline class="default-timeline">
            <el-timeline-item v-for="(item, index) in props.timeline" :key="index" :timestamp="item.timestamp" placement="top">
              <div v-if="item.auditUserName" class="audit-op">{{ item.auditUserName }}:{{ item.auditOpName }}</div>
              <div class="audit-desc">{{ item.auditDesc }}</div>
            </el-timeline-item>
          </el-timeline>
        </template>
        <slot name="form"></slot>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.base-approve-wrapper {
  @include flex();
  @include rect(100%, 100%);
  .left-wrapper {
    @include rect(60%, 100%);
    margin-right: 10px;
  }
  .right-wrapper {
    @include rect(40%, 100%);
    margin-left: 10px;

    .content {
      @include flex(column, flex-start, flex-start);
      overflow: hidden;

      .default-timeline.el-timeline {
        flex: 1;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        margin-bottom: 20px;

        .audit-op {
          font-size: 13px;
          font-weight: bold;
        }
        .audit-desc {
          font-size: 13px;
          color: rgba(154, 154, 156, 1);
          margin-top: 10px;
        }
      }
    }
  }

  .left-wrapper,
  .right-wrapper {
    padding: 33px 40px;
    box-sizing: border-box;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    @include flex(column, flex-start, center);

    .title {
      font-family: 'PingFangSC-Medium';
      width: 100%;
      padding-bottom: 10px;
      border-bottom: 1px solid #dfdfdf;
      margin-bottom: 20px;
    }

    .content {
      width: 100%;
      flex: 1;
      overflow: auto;
    }
  }
}
</style>
